<template>
  <el-dialog :title="`${row.id?'编辑':'添加'}消息`" :visible.sync="visible" :close-on-click-modal="false" 
    :before-close="handleCloseDialog" width="700px">
    <el-form :model="dataObject" :rules="rules" ref="adminForm" label-width="130px" size="small">
    <el-form-item label="标题：" prop="title">
        <el-input v-model="dataObject.title" show-word-limit placeholder="请输入标题" :maxlength="200" clearable></el-input>
      </el-form-item>
      <el-form-item label="类型：" prop="type">
        <el-select v-model="dataObject.type" placeholder="请选择类型" >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员：" prop="member" v-if="dataObject.type == '1'">
        <el-select
          v-model="dataObject.member"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="不输入默认发所有"
          :remote-method="remoteMethod"
          :loading="remoteLoading">
          <el-option
            v-for="item in memberOptions"
            :key="item.nickname"
            :label="item.nickname"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="正文内容：" prop="content">
        <el-input v-model="dataObject.content" type="textarea" placeholder="请输入正文内容" rows="10" show-word-limit :maxlength="200" clearable></el-input>
      </el-form-item>
      
    </el-form>
   
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirmDialog('adminForm')" size="mini" :loading="loading">确 定</el-button>
      <el-button @click="handleCloseDialog" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addMessage,updateMessage } from '@/api/message/index';
import { createNamespacedHelpers } from "vuex";
import { getMemberLickList } from '@/api/transaction/index';
const { mapState } = createNamespacedHelpers("message");
const defaultObject = {
  title: "",
  type: '',
  content:'',
  member:[]
};

export default {

  data() {
    return {
      visible:true,
      loading: false,
      remoteLoading:false,
      dataObject: Object.assign({}, defaultObject),
      typeOptions:[],
      memberOptions:[]
    };
  },
  props: {
    row: {
      type: Object,
      default: {}
    }
  },
   computed: {
    ...mapState({
      rules: state => state.rules,
      messageType: state => state.routes.messageType
    })
  },
  mounted() {
     this.typeOptions=Object.keys(this.messageType).map(key=>{
      return{
        label:this.messageType[key],
        value:key
      }
    })
    this.getLoad();
  },
  methods: {

    //初始化详情
    getLoad() {
      this.dataObject={...this.row,type:(this.row.type).toString()};
      
    },
    handleCloseDialog() {
      this.$emit("handle-cancel");
    },
    handleConfirmDialog(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          this.loading=true;
          let params={...this.dataObject};
          
          if(this.row.id){
            await updateMessage({...params,id:this.row.id});
          }else{
            await addMessage(params);
          }
          this.loading=false;
          this.resetForm(formName);
          this.$message({
            message: `${this.row.id?'新增':'编辑'}成功`,
            type: "success",
            duration: 1000
          });
          this.$emit("handle-confirm");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataObject = Object.assign({}, defaultObject);
    },
    //远程搜索会员
    async remoteMethod(query) {
        if (query !== '') {
          this.remoteLoading = true;
          const res = await getMemberLickList({ nickname: query });
          this.remoteLoading = false;
          if(res.data.length){
              this.memberOptions=res.data.filter(item => {
                return item.nickname.toLowerCase()
                  .indexOf(query.toLowerCase()) > -1;
              });
              return;
          }
          this.memberOptions = [];
          return;
        }
        this.memberOptions = [];
      }

  }
};
</script>
<style scoped>

</style>